.card-pack{
	height: 100vh;
	background-color: #f2f2f2;
	display: flex;
	flex-direction: column;
	.main{
		padding: 32rpx;
		box-sizing: border-box;
		.operation-bar{
			height: 40rpx;
			font-size: 28rpx;
			font-family: $global-font-family;
			font-weight: 400;
			color: #333333;
			line-height: 40rpx;
			margin-bottom:24rpx;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			.operation-item{
				display: flex;
				.icon{
					margin-right: 4rpx;
				}
			}
		}
		.card-list{
			flex: 1;
			// overflow: hidden;
			overflow-y: scroll;
			.card-item-wrapper{
				position: relative;
				height: 316rpx;
				border-radius: 24rpx;
				background-color: #ffffff;
				width: 100%;
				overflow: hidden;
				display: flex;
				flex-direction: column;
				margin-bottom: 32rpx;
				.card-cover-wrapper{
					height: 228rpx;
					padding: 32rpx;
					box-sizing: border-box;
					.card-info{
						display: flex;
						align-items: center;
						height: 100rpx;
						.card-icon{
							width: 100rpx;
							height: 100rpx;
							
							margin-right: 12rpx;
						}
						.info-main{
							display: flex;
							height: 100%;
							flex: 1;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							flex-direction: column;
							justify-content: space-between;
							font-family: $global-font-family;
							color: #ffffff;
							.info-title{
								height: 44rpx;
								font-size: 32rpx;
								font-weight: 800;
								line-height: 44rpx;
								
							}
							.info-desc{
								height: 40rpx;
								font-size: 28rpx;
								font-weight: 400;
								line-height: 40rpx;
								
							}
						}
					}
				}
				.card-operation-button-wrapper{
					display:flex;
					flex:1;
					
					padding: 16rpx;
					box-sizing: border-box;
					.btn-item{
						flex: 1;
						height: 100%;
						border-right:2rpx #cccccc solid;
						font-size: 28rpx;
						font-family: $global-font-family;
						font-weight: 400;
						color: #333333;
						display: flex;
						align-items: center;
						justify-content: center;
						.icon{
							margin-right: 4rpx;
						}
						&:last-of-type{
							border-right: none;
						}
						&.disabled{
							color:#cccccc;
						}
					}
				}
				.check-prompt{
					position: absolute;
					right: 32rpx;
					top: 32rpx;
					width: 180rpx;
					height: 56rpx;
					border-radius: 16rpx;
					border: 2rpx solid #FFFFFF;
					font-size: 28rpx;
					font-family: $global-font-family;
					font-weight: 400;
					color: #FFFFFF;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				.upload-btn{
					position: absolute;
					right: 32rpx;
					top: 32rpx;
					width: 180rpx;
					height: 56rpx;
					border-radius: 16rpx;
					background-color: #ffffff;
					font-size: 28rpx;
					font-family: $global-font-family;
					font-weight: 400;
					color: #333333;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}
}